<template>
    <div class="wrapper">
      <myHeader :obj="myObj" @events="events"></myHeader>
      <main>
        <div class="bigFace" @click="toAddress()" :style="{background:'url('+ datalist.User.HeadUrl +') no-repeat center'}">
          <praise-bar></praise-bar>
        </div>
        <div class="infos">
          <div class="contentInfo"><abbr>{{datalist.User.Name}}</abbr><span>{{datalist.User.Job}}</span></div>
          <div class="btns" v-if="relation!=4">
            <!--<span>屏蔽</span>-->
            <span class="pink" v-show="relation!=0" @click="toFocus(datalist.User.Identifier,relation)">{{relation == 3?'关注+':'取消关注'}}</span>
          </div>
        </div>
        <div class="position" v-if="datalist.User.Locality||datalist.CreateTime">
          <div class="pos">
            <i v-if="datalist.User.Locality"></i><p class="p_0309">{{datalist.User.Locality}}</p>
          </div>
          <time v-if="datalist.CreateTime" class="time_0309">发布时间：{{datalist.CreateTime.slice(0,10)}}</time>
        </div>
        <article class="article_0309">
          <h2 class="h2_0309">{{(datalist.User.SelfSignature == null || datalist.User.SelfSignature)?"个性签名":"行家介绍"}}</h2>
          <p class="text_0309">{{datalist.User.SelfSignature?datalist.User.SelfSignature:datalist.User.Introduce}}</p>
        </article>
      </main>
      
    </div>
</template>
<script>
import myHeader from './base/myHeader';
import praiseBar from './base/praiseBar';
import API from '../assets/js/asktoses';
import Chat from '../assets/js/chat';
import Client from '../assets/js/common';
import { fetchOther, centerUrl,HJappid,HJchannelcode } from '../assets/api';
import { Toast } from 'mint-ui';
export default {
  data () {
    return {
      myObj: {
        type: 2,
        text: "行家"
      },
      relation:3,//默认用户无关系
      datalist:{},
      loginData: null,
    }
  },
  created(){
    this.loginData = Client.getStore('login');
    let storeData = this.$store.state.detailDatas;
    this.datalist = storeData;
    this.relation = this.datalist.User.Relation;
    console.log('求见详情',storeData);
  },
  methods: {
    events(i){
      if(i == 2){
        this.$store.commit('boxShow', false);
      }else if (i == 3){

      }
    },
    toAddress(){
      let openid = this.datalist.User.OpenId;
      location.href = `${centerUrl}housekeeper/show?AppId=${HJappid}&channelCode=${HJchannelcode}&to=${openid}`;
    },
    async toFocus(toId,type){
      let objs = this.loginData[2];
      await Chat.changeFocus({Identifier:objs.Identifier,AppId:objs.AppId,...this.loginData[1]},toId,type);
      if(type == 3){
        this.relation = 1;
        Toast('关注成功');
      }else{
        this.relation = 3;
        Toast('取消关注成功');
      }
    }
  },
  components: {
    myHeader,
    praiseBar
  }
}

</script>
<style lang="less">
  .wrapper {
    width: 3.75rem;
    main {
      width: 3.75rem;
      height: 100%;
      padding-top: .44rem;
      position: absolute;
      top: 0;
      left: 0;
      overflow-y: auto;
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
      .article_0309 {
        width: 3.75rem;
        padding: .1rem .15rem;
        box-sizing: border-box;
        background: white;
        .text_0309 {
          color: #39393D;
          font-size: .14rem;
          line-height: 1.5;
          text-align: justify;
        }
        .h2_0309 {
          font-size: .14rem;
          color: #39393D;
          margin-bottom: .1rem;
        }
      }
      .position {
        width: 100%;
        height: .39rem;
        background: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 .14rem;
        box-sizing: border-box;
        .time_0309 {
          width: 1.3rem;
          text-align: right;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          color: #4A4A4A;
        }
        .pos {
          width: 2.1rem;
          display: flex;
          
          .p_0309 {
            width: 1.9rem;
            line-height: .13rem;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            color: #4A4A4A;
          }
          i {
            display: block;
            width: .1rem;
            height: .13rem;
            background: url("../assets/img/icon_map@3x.png") center center;
            background-size: cover;
            background-repeat: no-repeat;
            margin-right: .1rem;
          }
        }
      }
      .infos{
        width: 100%;
        height: .35rem;
        background: #d8d2d2;
        padding: 0 .14rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .contentInfo {
          width: 2.2rem;
          height: .35rem;
          display: flex;
          align-items: center;
          font-size: .14rem;
          color:#39393D;
          font-weight: bold;
          abbr{
            display: inline-block;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          span {
            display: block;
            height: .35rem;
            line-height: .35rem;
            width: 1.54rem;
            padding-left: .08rem;
            font-weight:  400;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
        }
        .btns {
          width: 1.22rem;
          height: .35rem;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          span {
            min-width:.44rem;
            height: .2rem;
            line-height: .2rem;
            border-radius: .04rem;
            background-color: rgba(74, 74, 74, 1);
            display: block;
            color: white;
            text-align: center;
            padding:0 .06rem;
            &.pink {
              background: #FF6969;
              margin-left: .1rem;
            }
          }
        }
      }
      .bigFace {
        width: 100%;
        height: 3.4rem;
        background: url("../assets/img/person/2.jpg") center center;
        background-size: cover !important;
        background-repeat: no-repeat;
        position: relative;
        
      }
    }
  }
</style>
